<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()" class="login-form">
    <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
        <nz-tab nzTitle="账户密码登录">
            <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
            <nz-form-item>
                <nz-form-control>
                    <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-user">
                        <input nz-input formControlName="userName" placeholder="手机号码/电子邮箱">
                    </nz-input-group>
                    <nz-form-explain *ngIf="userName.dirty && userName.errors">请输入账户名且至少五个字符！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-lock">
                        <input nz-input type="password" formControlName="password" placeholder="密码">
                    </nz-input-group>
                    <nz-form-explain *ngIf="password.dirty && password.errors">
                        请输入密码！
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
        </nz-tab>
        <nz-tab nzTitle="手机短信登录" [nzDisabled]="true">
            <nz-form-item>
                <nz-form-control>
                    <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-user">
                        <input nz-input formControlName="mobile" placeholder="手机号">
                    </nz-input-group>
                    <nz-form-explain *ngIf="mobile.dirty && mobile.errors">请输入正确的手机号！</nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <nz-row [nzGutter]="8">
                        <nz-col [nzSpan]="16">
                            <nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-mail">
                                <input nz-input formControlName="captcha" placeholder="验证码">
                            </nz-input-group>
                            <nz-form-explain *ngIf="mobile.dirty && mobile.errors">
                                请输入验证码！
                            </nz-form-explain>
                        </nz-col>
                        <nz-col [nzSpan]="8">
                            <button nz-button nzSize="large" (click)="getCaptcha()" [disabled]="count" class="ant-btn__block">{{ count ? count + 's' : '获取验证码' }}</button>
                        </nz-col>
                    </nz-row>
                </nz-form-control>
            </nz-form-item>
        </nz-tab>
    </nz-tabset>
    <nz-form-item>
        <nz-col [nzSpan]="12">
            <label nz-checkbox formControlName="remember">自动登录</label>
        </nz-col>
        <nz-col [nzSpan]="12" class="text-right">
            <a class="forgot">忘记密码？</a>
        </nz-col>
    </nz-form-item>
    <nz-form-item>
        <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" class="ant-btn__block">登录</button>
    </nz-form-item>
</form>
<div class="other">
    更多登录方式
    <i title="QQ" class="anticon anticon-qq icon"></i>
    <i title="微信" class="anticon anticon-wechat icon"></i>
    <i title="支付宝" class="anticon anticon-alipay-circle icon"></i>
    <i title="微博" class="anticon anticon-weibo-circle icon"></i>
    <a class="register" routerLink="/single/signup">注册账户</a>
</div>